<template>
  <div>
    <public-head :title="title" :path="path" />
    <div class="content">
      <div class="leave-type">
        <select-dialog :dialogData="qingjiaData" contents = "请假类型"  :vanValue = "qingjiaValue"/>
      </div>

      <div class="timeSet">
        <van-cell value="2021-06-06" is-link>
          <template #title>
            <span class="custom-title">开始时间</span>
            <van-tag type="danger">*</van-tag>
          </template>
        </van-cell>

        <van-cell value="2021-07-06" is-link>
          <template #title>
            <span class="custom-title">结束时间</span>
            <van-tag type="danger">*</van-tag>
          </template>
        </van-cell>

        <van-cell value="6天" is-link>
          <template #title>
            <span class="custom-title">请假时长</span>
            <van-tag type="danger">*</van-tag>
          </template>
        </van-cell>
      </div>

      <div class="detail">
        <span style="fontSize:12px;color:rgb(202,202,202)"
          >自动校准打卡记录。</span
        ><span style="fontSize:12px;color:rgb(25,138,255)">《了解详情》</span>
      </div>

      <div class="reason">
        <van-field
          v-model="reasonMessage"
          rows="4"
          autosize
          type="textarea"
          maxlength="30"
          placeholder="请输入请假事由"
          show-word-limit
        />
      </div>

      <div class="appendixTitle">附件</div>
      <div class="appendix">
        <van-uploader v-model="fileList" multiple />
      </div>

      <div class="personTitle">审批人&抄送人</div>
      <div class="person">
        <!-- <van-cell value="审批人" /> -->
        <van-cell >
          <template #title>
            <span class="custom-title">审批人：</span>
            <input type="text" placeholder="请输入">
          </template>
        </van-cell>
        <van-cell >
          <template #title>
            <span class="custom-title">抄送人：</span>
            <input type="text" placeholder="请输入">
          </template>
        </van-cell>
      </div>

      <div class="button">
        <van-button type="info" size="large">提 交</van-button>
      </div>
    </div>
    <div class="empty"></div>
  </div>
</template>

<script>
import PublicHead from "../../../components/PublicHead";
import SelectDialog from "../../components/SelectDialog";
export default {
  name: "QingJia",
  components: {
    PublicHead,
    SelectDialog,
  },
  data() {
    return {
      title: "请假申请",
      path: "qingjia",
      reasonMessage: "",
      fileList: [
        { url: "https://img01.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: "https://cloud-image", isImage: true },
      ],
      qingjiaData:[
        {id:1,value:"事假"},
        {id:2,value:"病假"},
        {id:3,value:"婚假"},
      ],
      qingjiaValue:"事假"
    };
  },
  methods: {
     
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.content{
  background-color rgb(245,245,245)
  .leave-type{
    width 345px
    margin  10px auto
  }
  .van-tag--danger{
    background-color #fff
    color rgba(253, 63, 63, 1)
  }
  input{
    margin-left 10px
  }
  .timeSet{
    width 345px
    margin  0 auto
    margin-bottom 5px
  }
  .detail,.reason,.appendixTitle,.appendix,.personTitle,.person,.button{
    width 345px
    margin  0 auto
    margin-bottom 15px
  }
  .person{
    .van-cell:first-child{
      border-bottom 1px solid #ddd
    }
  }
  .appendixTitle{
    font-size 15px
  }
  .appendix{
    background-color #fff
    box-sizing border-box
    padding 10px 5px
    padding-top 20px
  }
}
.empty{
  height 100px
}
</style>
